<template>
  <div>
    <div class="pin-item-warp shadow" v-for="item in pinList" :key="item.objectId">
      <pin-item :item.sync="item"></pin-item>
    </div>
  </div>
</template>

<script>
    import { mapState } from 'vuex'
    import PinItem from "../../../components/business/pinItem";
    import reachBottom from "../../../mixins/reachBottom";
    export default {
        async asyncData({ app, params }){
          let pinList = await  app.$api.getPinListByTopic({
            topicId: params.id,
            page: 1,
            pageSize: 20
          }).then(res => res.s === 1 ? res.d.list : [])
          return {
            pinList
          }
        },
      head(){
          return {
            title: `${this.categoryName ? this.categoryName + '-' : ''}沸点 - 掘金`
          }
      },
      validate({ params }){
        if (params.id && params.id != 'undefined'){
          return true
        }
        return  false
      },
      mixins: [reachBottom],
      components: { PinItem },
      data(){
          return {
            page: 1,
            pinList: []
          }
      },
      computed: {
          ...mapState('category', {
            navList: 'pinCategoryList'
          }),
        categoryName(){
            let item = this.navList.filter(item => item.id === this.$route.params.id)[0]
          return item ? item.name : ''
        }
      },
      methods: {
          reachBottom(){
            this.page++
            this.getPinListByTopic()
          },
          async getPinListByTopic(){
            let res = await this.$api.getPinListByTopic({
              topicId: this.$route.params.id,
              page: this.page,
              pageSize: 20
            })
            if (res.s === 1) {
              this.pinList = this.pinList.concat(res.d.list)
            }
          }
      }

    }
</script>

<style lang="scss" scoped>
.pin-item-warp {
  margin-bottom: 10px;
}
</style>
